<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/js/vue.min.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/login.css" type="text/css">
    <title>Pesk-Cloud登录中心</title>
</head>
<body>
<div id="page">
    <div class="fill"></div>
    <div class="login-div">
        <div class="title">Pesk-Cloud 登陆中心</div>
        <form class="form" id="login-form" action="/oauth/login" method="post">
            <div class="form-inline">
                <label class="form-label">用户名</label>
                <input class="form-input" id="username" name="username" v-model="username" @blur="checkUser">
            </div>
            <div class="form-inline">
                <label class="form-label">密码</label>
                <input type="password" class="form-input" name="password" id="password" v-model="password" @blur="checkPwd" required>
            </div>
            <div class="text-inline">
                <span class="text-left-item">账号注册</span>
                <span>|</span>
                <span class="text-right-item">找回密码</span>
            </div>
            <div class="btn-group">
                <input type="button" id="login" @click="submit" class="form-btn" value="登录">
            </div>
        </form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#page',
        data() {
            return {
                username: '',
                password: ''
            }
        },
        created() {
            if (this.GetQueryValue("msg")) {
                alert("登录失败")
            }
        },
        watch: {},
        methods: {
            submit() {
                if (this.username === "" || this.username.length === 0) {
                    return false
                }
                if (this.password === "" || this.password === 0) {
                    return false
                }
               document.querySelector("#login-form").submit();
            },
            checkUser() {
                if (this.username === "" || this.username.length === 0) {
                    document.querySelectorAll("#username")[0].style.border = "2px solid red";
                } else {
                    document.querySelectorAll("#username")[0].style.border = "none";
                }
            },
            checkPwd() {
                if (this.password === "" || this.password.length === 0) {
                    document.querySelectorAll("#password")[0].style.border = "2px solid red";
                } else {
                    document.querySelectorAll("#password")[0].style.border = "none";
                }
            },
            GetQueryValue(queryName) {
                let query = decodeURI(window.location.search.substring(1));
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] === queryName) {
                        return pair[1];
                    }
                }
                return null;
            }
        }
    })
</script>
</html>